<template>
  <view class="box-view" :style="boxStyle">
    <view class="box-view-title" v-if="props.titBoxObj">
      <text>{{ titBoxObj.title }}</text>
      <text v-if="titBoxObj.titleCount" class="box-view-title-other">{{ titBoxObj.titleCount }}</text>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
import { defineProps, computed } from 'vue'

/**
 * 通用容器组件
 * @property {String} backgroundColor - 背景颜色，默认 #ffffff
 * @property {String} padding - 内边距，支持任何合法的 CSS padding 值
 * @property {String} borderColor - 边框颜色，为空时不显示边框
 * @property {Object} titBoxObj - 标题盒子对象
 */
const props = defineProps({
  backgroundColor: {
    type: String,
    default: '#56A9DB'
  },
  padding: {
    type: String,
    default: '20rpx 18rpx'
  },
  borderColor: {
    type: String,
    default: '#3F8ABE'
  },
  titBoxObj: {
    type: Object
  }
})

const boxStyle = computed(() => {
  const style = {
    backgroundColor: props.backgroundColor,
    // padding: props.padding
  }

  if (props.borderColor) {
    Object.assign(style, {
      borderColor: props.borderColor,
      borderWidth: '2px',
      borderStyle: 'solid'
    })
  } else {
    Object.assign(style, {
      border: 'none'
    })
  }

  return style
})
</script>

<style lang="scss" scoped>
.box-view {
  width: 100%;
  box-sizing: border-box;
  border-radius: 16rpx;background-color: #FFFFF4;
  height: 100%;overflow: hidden;
  
  &-title{
				background: #3D85EC;
				border-radius: 8rpx 8rpx 0 0;
				padding: 5rpx 10rpx;
        text-align: center;
        position: relative;
        font-size: 16rpx;
				text{
					color: #fff;
				}
					&-other{
						font-size: 12rpx;
						font-weight: 200;
            position: absolute;right: 10rpx;
            top: 50%;
            transform: translateY(-50%);
					}
				// font-size: 20rpx;
			}
}
</style>